<!--
 * @Author: ShaXin
 * @Date: 2022-01-20 11:01:39
 * @LastEditors: tc
 * @LastEditTime: 2022-04-08 16:04:20
-->
<template>
    <div class="warp">
        <div class="leftBox">
            <div class="right_center_card">
                <div v-for="(item, index) in cardData" :key="index" :class="item.class" @click="cardClick(index)" style="cursor: pointer;">
                    <div class="card_left"> 
                        <div class="card_left_name">{{item.title}}</div>
                        <div class="card_left_detail">{{cardDataNum != null ?cardDataNum[item.prop]:'--'}}</div>
                    </div>
                    <div class="card_right">
                            <el-image
                        :src="item.url"
                        fit="fit"/>
                    </div>
                </div>
            </div>
            <div style="height:20px"></div>
            <div class="leftBottom" v-loading="loading0">
                <div id="container" class="maptongy"></div>
            </div>
        </div>
        <div class="rightBox">
            <div class="rightBoxTop">
                <div class="title" style="height:40px">
                    <div style="height:10px"></div>
                    <div class="titleV" >堤坝风险提醒</div>
                </div>
                <div class="tabBox">
                    <el-table
                        v-loading="loading"
                        :data="tableData1"
                        border
                        empty-text="暂无数据"
                        height="100%"
                    >
                        <el-table-column
                            v-for="(item, index) in tableTitle1"
                            :key="index"
                            :prop="item.prop"
                            :label="item.label"
                            :width="item.width ? item.width:''"
                            :formatter="item.formatter"
                        >
                        </el-table-column>
                        <el-table-column prop="grade" label="风险等级" >
                            <template  #default="scope" >
                                <div :style="scope.row.grade=='低风险'?'color:#26C345;':scope.row.grade=='中风险'?'color:#FFAA00;':'color:#FF4040;'">{{scope.row.grade}}</div>
                            </template>
                         </el-table-column>

                    </el-table>
                </div>
            </div>
            <div class="rightBoxBottom">
                <div class="title" style="height:40px">
                    <div style="height:10px"></div>
                    <div class="titleV" >设备运行异常提醒</div>
                </div>
                <div class="tabBox">
                    <el-table
                        v-loading="loading"
                        :data="tableData2"
                        border
                        empty-text="暂无数据"
                        height="100%"
                    >
                        <el-table-column
                            v-for="(item, index) in tableTitle2"
                            :key="index"
                            :prop="item.prop"
                            :label="item.label"
                            :width="item.width ? item.width:''"
                            :formatter="item.formatter"
                        >
                        </el-table-column>
                        <el-table-column prop="status" label="状态" >
                            <template  #default="scope" >
                                <div :style="scope.row.status=='正常'?'color:#26C345;':scope.row.status=='异常'?'color:#FFAA00;':scope.row.status=='故障'?'color:#FF4040;':'color:#656565;'">{{scope.row.status}}</div>
                            </template>
                         </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import abcApi from '@/api/abc'
import {formatTimestamp} from '@/utils/common'
import AMapLoader from '@amap/amap-jsapi-loader';
let map,cluster,markerdd
export default {
    name: 'index',
    components: {
    },
    data() {
        return {
            cardData:[
                {class:'bg1',title:'总水库数',url:require('../../assets/img/dashboard/sbzs.png'),prop:'sum'},
                {class:'bg2',title:'低风险',url:require('../../assets/img/dashboard/dfx.png'),prop:'lower'},
                {class:'bg3',title:'中风险',url:require('../../assets/img/dashboard/zfx.png'),prop:'middles'},
                {class:'bg4',title:'高风险',url:require('../../assets/img/dashboard/gfx.png'),prop:'hight'},
            ],
            cardDataNum:{},
            tableData1:[],
            tableTitle1:[
                {
                    prop: 'reservoirName',
                    label: '水库名称',
                },
                {
                    prop: 'city',
                    label: '市'
                },
                {
                    prop: 'country',
                    label: '区县'
                },
                // {
                //     prop: 'grade',
                //     label: '风险等级'
                // },
                // {
                //     prop: 'operateTime',
                //     label: '原因'
                // }
            ],
            tableData2:[],
            tableTitle2:[
                {
                    prop: 'reservoirName',
                    label: '水库名称',
                },
                {
                    prop: 'city',
                    label: '市'
                },
                {
                    prop: 'country',
                    label: '区县'
                },
                // {
                //     prop: 'status',
                //     label: '状态'
                // },
                // {
                //     prop: 'operateTime',
                //     label: '原因'
                // }
            ],
            AMap:null,
            amampData:null, 
            loading0:false,
            loading:false,

        }
    },
    created() {
        this.creatMap()
    },
    mounted() {
        this.findByRisk();
        this.findRiskErr();//查询所有风险的水库
        this.findRunErr();//查询所有异常的水库
    },
    methods: {
        creatMap(){
            let that = this;
            that.fullscreenLoading = true
            AMapLoader.load({
                key: "fbb296dc6c8c05c7437fa620659f5e9f", // 申请好的Web端开发者Key
                version: "2.0",
                // AMapUI: {
                //     version: '1.1',   // AMapUI 版本
                //     plugins:['overlay/SimpleMarker','geo/DistrictExplorer'],       // 需要加载的 AMapUI ui插件
                // },
                plugins : ["AMap.Geocoder","AMap.MarkerClusterer"],
            })
                .then((AMap) => {
                    that.AMap = AMap
                    map = new that.AMap.Map("container", {
                        zoom: 9.6,
                        pitch: 50,
                    });
                    that.fullscreenLoading = false
                     that.findRiskErr()
                })
                .catch((e) => {
                    console.log(e);
                });
        },
        findByRisk(){
            abcApi.findByRisk({})
            .then(res => {
                this.cardDataNum=res.data;
                
            })
            .catch(() => {
            })
        },
        findRiskErr(){
            this.loading0=true;
            abcApi.findRiskErr({})
            .then(res => {
                this.loading0=false;
                this.tableData1=res.data;
                this.amapData(res.data);
            })
            .catch(() => {
                this.loading0=false;
            })
        },
        findRunErr(){
            abcApi.findRunErr({})
            .then(res => {
                this.tableData2=res.data;
                
            })
            .catch(() => {
            })
        },
        findRiskList(grade){
            this.loading0=true;
            abcApi.findRiskList(grade)
            .then(res => {
                // this.tableData2=res.data;
                this.loading0=false;
                this.amapData(res.data);
            })
            .catch(() => {
                this.loading0=false;
            })
        },
        cardClick(index){
            if (index==0) {
                this.findRiskErr()
            }
            else
            {
                this.findRiskList(index);
            }

        },

        amapData(res){
            let that = this
            map.clearMap();
            if(cluster != undefined){
                cluster.setMap(null);
            }
            that.amampData = res
            
            if(res.length > 0){
                // that.reservoirName = res[0].reservoirName 
                // map.setZoomAndCenter(18, [112.93133,28.2351]);
                map.setZoomAndCenter(7.6, [res[0].lon , res[0].lat]);
                // that.getEquipmentCodeData(res[0])
                let markers = [];
                for (var i = 0; i < res.length; i++) {
                    // 创建点实例
                    let marker = {}
                    let lnglat = [res[i].lon, res[i].lat]
                    marker.lnglat = lnglat
                    marker.data = res[i]
                    marker.icon = require('../../assets/img/dashboard/水库.png')
                    // marker.icon = that.nengliaopanduan(res.data[i].alarmStatus,res.data[i].onlineStatus),
                    markers.push(marker);
                }
                let count = markers.length;
                let _renderClusterMarker = function (context) {
                    let factor = Math.pow(context.count / count, 1 / 18);
                    let div = document.createElement('div');
                    let Hue = factor * 240;
                    let bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
                    let fontColor = 'hsla(' + Hue + ',100%,90%,1)';
                    let borderColor = 'hsla(' + Hue + ',100%,40%,1)';
                    let shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
                    div.style.backgroundColor = bgColor;
                    let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
                    div.style.width = div.style.height = size + 'px';
                    div.style.border = 'solid 1px ' + borderColor;
                    div.style.borderRadius = size / 2 + 'px';
                    div.style.boxShadow = '0 0 5px ' + shadowColor;
                    div.innerHTML = context.count;
                    div.style.lineHeight = size + 'px';
                    div.style.color = fontColor;
                    div.style.fontSize = '14px';
                    div.style.textAlign = 'center';
                    context.marker.setOffset(new that.AMap.Pixel(-size / 2, -size / 2));
                    context.marker.setContent(div)
                };
                    let _renderMarker = function(context) {
                    let content = `<div class="amap-markerYs">
                        <div><img src="${require('../../assets/img/dashboard/水库缩小.png')}"/></div>
                        <div class="markerYs-text" style="width:${context.data[0].data.reservoirName?context.data[0].data.reservoirName.length*20:context.data[0].data.reservoir_name.length*20}px">${context.data[0].data.reservoirName?context.data[0].data.reservoirName:context.data[0].data.reservoir_name}</div>
                    </div>`;
                    // let offset = new _this.AMap.Pixel(-9, -9);
                    context.marker.setContent(content) 
                    // context.marker.setOffset(offset)
                    context.marker.setPosition(context.data[0].lnglat)
                    // context.marker.setIcon(context.data[0].icon)
                }
                cluster = new that.AMap.MarkerCluster(map, markers, {
                    gridSize: 60,
                    renderClusterMarker: _renderClusterMarker,
                    renderMarker: _renderMarker,
                });
                cluster.on("click", (e) =>{
                    let curZoom = map.getZoom();
                    // map.setZoom(18.5)
                    // map.setCenter([e.clusterData[0].lnglat.lng , e.clusterData[0].lnglat.lat]); 
                    if(e.clusterData.length == 1){
                        // curZoom = 18
                        // that.getEquipmentCodeData(e.clusterData[0].data)
                        
                        this.$router.push({
                            name:'home',
                            query:{
                                stationId:e.clusterData[0].data.stationId,
                                reservoirName:e.clusterData[0].data.reservoirName
                            }
                        })

                    }else {
                        if(curZoom < 20){
                            curZoom += 1;
                        }
                    }
                    map.setZoomAndCenter(curZoom, e.lnglat);
                })
            }
        },
    },
    beforeUnmount(){
        map.destroy();
    }
}
</script>
<style lang='scss' scoped>
.warp{
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    background: #FFFFFF;
    box-shadow: 0px 0px 14px 0px rgba(214, 214, 214, 0.25);
    border-radius: 6px;
    padding: 30px;
    display: flex;
    justify-content:space-between;
}
.leftBox{
    width: calc(65% - 20px);
    height: 100%;

    .right_center_card{
        height: 90px;
        margin: 0px 0px;
        
        display: flex;
        justify-content:space-between;
        >div{
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .bg1{
            width: 24%;
            // background: linear-gradient(0deg, #22A5BD, #37D6C1);
            background-color: #0096FF;
            border-radius: 6px;
        }
        .bg2{
            width: 24%;
            // background: linear-gradient(0deg, #22BD84, #37D69C);
            background-color: #26C345;
            border-radius: 6px;
        }
        .bg3{
            width: 24%;
            // background: linear-gradient(0deg, #49B0F8, #2B98EC);
            background-color: #FFAA00;
            border-radius: 6px;
        }
        .bg4{
            width: 24%;
            // background: linear-gradient(0deg, #22A5BD, #37D6C1);
            background-color: #FF4040;
            border-radius: 6px;
        }
        .card_left {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                padding-left: 20px;
                .card_left_name {
                    line-height: 18px;
                    color: #FFFFFF;
                    font-size: 16px;
                    margin-bottom: 25px;
                    margin-top: 10px;
                }
                .card_left_detail {
                    font-size: 28px;
                    font-weight: bold;
                    color: #FFFFFF;
                }
        }
        .card_right {
            padding-right: 15px;
        }
    }
    .leftBottom{
        width: 100%;
        height: calc(100% - 110px);
        // background-color: coral;
    }
}
.rightBox{
    width: 35%;
    height: 100%;
    .rightBoxTop{
        height: 50%;
        width: 100%;
        
    }
    .rightBoxBottom{
        height: 50%;
        width: 100%;
        
    }
}

.title{
    height: 40px;
    .titleV{
        height: 20px;
        line-height: 20px;
        padding-left: 8px;
        border-left: 4px solid #0AAFF5 ;
        font-size: 16px;
    }
}
.tabBox{
    height: calc(100% - 40px);
    // background-color: coral;
}

.maptongy {
    height: 100%;
    width: 100%;
    z-index: 1;
}

</style>